<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>静态页面实现CURD</title>
</head>
<body>

    <!-- <button id="addBtn">新增</button>
    <hr> -->
    <table id="theTable" border="1" class="dy-table">
		<thead>
			<tr>
				<th len="6">姓名</th>
				<th len="3">年龄</th>
				<th len="10">地址</th>
				<th>
					操作
					<button class="addBtn">新增</button>
				</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td data-col="name">aa</td>
				<td data-col="age">10</td>
				<td data-col="address">海淀</td>
				<td>
					<button class="updateBtn">修改</button>
					<button class="delBtn">删除</button>
				</td>
			</tr>
		</tbody>
    </table>
    
    <hr>
    <table id="theTable2" border="1" class="dy-table">
		<thead>
			<tr>
				<th len="3">姓名</th>
				<th len="3">年龄</th>
				<th len="3">地址</th>
				<th len="3">电话</th>
				<th>
					操作
					<button class="addBtn">新增</button>
				</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td data-col="name">aa</td>
				<td data-col="age">10</td>
				<td data-col="address">海淀</td>
				<td data-col="address">15000000000</td>
				<td>
					<button class="updateBtn">修改</button>
					<button class="delBtn">删除</button>
				</td>
			</tr>
		</tbody>
    </table>

    <script src="../lib/jquery-1.12.1.min.js"></script>
    <script>
        !function() {

            $('.dy-table').each(function() {
                
                var $theTable = $(this),
                    oldObj;

                // 增加
                $theTable.on('click', '.addBtn', function() {
                    $theTable.find('tbody').append(getTr2($theTable, 'input'));
                });

                // 保存
                $theTable.on('click', '.saveBtn', function() {
                    var $this = $(this),
                        $tr = $this.parents('tr'),
						data;

                    // 20160918
                    if (checkForm($tr)) {
                        data = getDataFromTr($tr, 'input');
                        // $tr.replaceWith(getTr(obj, 'input'));
                        $tr.replaceWith(getTr2($theTable, 'input', data));
                    }

                });

                // 修改
                $theTable.on('click', '.updateBtn', function() {
                    var $this = $(this),
                            $tr = $this.parents('tr');
                    var obj = getDataFromTr($tr);
                    oldObj = obj;
                    // $tr.replaceWith(getTr(obj));
                    $tr.replaceWith(getTr2($theTable, null, obj));
                });

                // 删除
                $theTable.on('click', '.delBtn', function() {
                    $(this).parents('tr').remove();
                });

                // 取消
                $theTable.on('click', '.cancelBtn', function() {
                    var $tr = $(this).parents('tr');
                    // oldObj = getVal(oldObj);
                    $tr.replaceWith(getTr2($theTable, 'input', oldObj));
                });

                // 20160918
                function checkForm($tr) {
                    var $th = $theTable.find('thead th');
                    var $td = $tr.find('td');
                    var rLen, currLen;
                    for (var i=0; i<$th.length - 1; i++) {
                        rLen = $($th[i]).attr('len');
                        currLen = $($td[i]).find('input').val().length;
                        if (currLen < rLen) {
                            alert('字段长度不能小于' + rLen);
                            return false;
                        }
                    }
                    return true;
                }

                /*function getVal(obj) {
                    for (var i in obj) {
                        obj[i] = $(obj[i]).val();
                    }
                    return obj;
                }*/

                function getDataFromTr($tr, type) {
					var tmpArr = [];
                    if (type == 'input') {
						
						$tr.find('td').each(function() {
							tmpArr.push($(this).find('input').val());
						});
						tmpArr.pop();
						return tmpArr;
						
						/*return {
                            name: $tr.find('td[data-col=name] > input').val(),
                            age: $tr.find('td[data-col=age] > input').val(),
                            address: $tr.find('td[data-col=address] > input').val()
                        };*/
                    } else {
						$tr.find('td').each(function() {
							tmpArr.push($(this).text());
						});
						tmpArr.pop();
						return tmpArr;
					
                        /*return {
                            name: $tr.find('td[data-col=name]').text(),
                            age: $tr.find('td[data-col=age]').text(),
                            address: $tr.find('td[data-col=address]').text()
                        };*/
                    }
                }
				
				function getTr2($theTable, type, item) {
					var $ths = $theTable.find('thead th'),
						trArr = ['<tr>'],
						isShowSaveBtn = false;

                    item = item || [];
					
					$ths.length = $ths.length - 1;
						
					$ths.each(function(i) {
						if (item.length == 0) { // 新增
							trArr.push('<td><input type="text"></td>');
							isShowSaveBtn = true;
						} else {
							if (type != 'input') { // 修改
								trArr.push('<td><input type="text" value="', item[i], '"></td>');
								isShowSaveBtn = true;
							} else { // 保存
								trArr.push('<td>', item[i], '</td>');
								isShowSaveBtn = false;
							}
						}
						
					});
					
					trArr.push(
						'<td>',
							'<button class="updateBtn">修改</button> ',
							'<button class="delBtn">删除</button> ',
							isShowSaveBtn ? '<button class="saveBtn">保存</button>' : '',
							isShowSaveBtn ? ' <button class="cancelBtn">取消</button>' : '',
						'</td>'
					);
					trArr.push('</tr>');
					
					return trArr.join('');
				}

                function getTr(item, type) {

                    var isShowSaveBtn = false;

                    item = item || {};

                    if ($.isEmptyObject(item)) { // 新增
                        item.name = '<input type="text">';
                        item.age = '<input type="text">';
                        item.address = '<input type="text">';
                        isShowSaveBtn = true;
                    } else {
                        if (type != 'input') { // 修改
                            item.name = '<input type="text" value="'+item.name+'">';
                            item.age = '<input type="text" value="'+item.age+'">';
                            item.address = '<input type="text" value="'+item.address+'">';
                            isShowSaveBtn = true;
                        } else { // 保存
                            isShowSaveBtn = false;
                        }
                    }

                    var tr = [
                        '<tr>',
                            '<td data-col="name">', item.name, '</td>',
                            '<td data-col="age">', item.age, '</td>',
                            '<td data-col="address">', item.address, '</td>',
                            '<td>',
                                '<button class="updateBtn">修改</button> ',
                                '<button class="delBtn">删除</button> ',
                                isShowSaveBtn ? '<button class="saveBtn">保存</button>' : '',
                                isShowSaveBtn ? ' <button class="cancelBtn">取消</button>' : '',
                            '</td>',
                        '</tr>'
                    ];
                    return tr.join('');
                }
                
            });

        }();
    </script>

</body>
</html>